import { Link } from "react-router";

var Nava = React.createClass({
	render : function(){ 
		return (
			<Link to={this.props.data.url}>
				<span className={"nav_a_btn iconfont "+this.props.data.icon} style={this.props.data.color}></span>
				<p>{this.props.data.tex}</p>
			</Link>
		)
	}
})

export default React.createClass({
	getInitialState : function(){
		return {
			state : [
			 	{
			 		url :"fenlei",
			 		icon:'icon-fenlei',
			 		tex:"产品分类",
			 		color:{
			 			background:"#fb6e52"
			 		}
			 	},
			 	{
			 		url :"",
			 		icon:'icon-xin',
			 		tex:"近期新品",
			 		color:{
			 			background:"#48cfae"
			 		}
			 	},
			 	{
			 		url :"",
			 		icon:'icon-shizhong',
			 		tex:"限时折扣",
			 		color:{
			 			background:"#4fc0e8"
			 		}
			 	},
			 	{
			 		url :"",
			 		icon:'icon-zan',
			 		tex:"值得买",
			 		color:{
			 			background:"#ac92ed"
			 		}
			 	},
			 	
			 	{
			 		url :"",
			 		icon:'icon-rili',
			 		tex:"尾货清仓",
			 		color:{
			 			background:"#92edac"
			 		}
			 	},
			 	{
			 		url :"",
			 		icon:'icon-leimupinleifenleileibie',
			 		tex:"优惠套餐",
			 		color:{
			 			background:"#6e52fb"
			 		}
			 	},
			 	{
			 		url :"",
			 		icon:'icon-shoucang',
			 		tex:"精选",
			 		color:{
			 			background:"#cfae48"
			 		}
			 	},
			 	{
			 		url :"",
			 		icon:'icon-gouwuche',
			 		tex:"买就送",
			 		color:{
			 			background:"#c0e84f"
			 		}
			 	},
			 	{
			 		url :"",
			 		icon:'icon-my-jifen',
			 		tex:"积分兑换",
			 		color:{
			 			background:"#2edac9"
			 		}
			 	},
			 	{
			 		url :"",
			 		icon:'icon-yonghu',
			 		tex:"签到有礼",
			 		color:{
			 			background:"#edac92"
			 		}
			 	}
			]
		}
	},
	render : function(){
		var Newnav = this.state.state.map(function(data,index){
			return <Nava data={data} key={index}/>
		})
		return (
			<nav>
				{Newnav}
			</nav>
		)
	}
})
